           .main{
    color:green;
    width:100%;
    height:100%;
    background-color: black;
                }
                .top{
    display:flex;
    align-items:center;
    justify-content: center;
    border:1px solid;
    border-color: blue;
    width:100%;
    height:10%;
    background-color: black; 
                }
                .bottom{
    display:flex;
    border:1px solid;
    border-color: blue;
    width:100%;
    height:90%;
    background-color: black; 
                }
                .left{
    border:1px solid;
    border-color: blue;
    width:20%;
    height:100%;
    background-color: black;                
                }
                .left > div{
    overflow-y:scroll;
    border:1px solid;
    border-color: blue;
    width:100%;
    height:50%;
    background-color:black; 
                }
                .right{
    border:1px solid;
    border-color: blue;
    width:80%;
    height:100%;
    background-color: black;                
                }
                .top2{
    overflow-y:scroll;
    border:1px solid;
    border-color: blue;
    width:100%;
    height:50%;
    background-color: black;                
                }
                .middle2{
    overflow-y:scroll;
    border:1px solid;
    border-color: blue;
    width:100%;
    height:30%;
    background-color: black;                
                }
                .bottom2{
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid;
    border-color: blue;
    width:100%;
    height:20%;
    background-color: black;                
                }